<template>
  <div>
    <div class="container">
      <!-- <div class="block" id="box"> -->
      <!-- <ul>
            <li v-for="(item, index) in listView.list" :key="index">
              <router-link :to="{ name: 'ViewShow', query: { id: item.id } }">
                <div>{{ item.info }}</div>
                <el-image :src="item.img"></el-image>
              </router-link>
            </li>
          </ul> -->

      <div
        class="image-container"
        slot="placeholder"
        v-for="(item, index) in listView.list"
        :key="index"
      >
        <router-link :to="{ name: 'ViewShow', query: { id: item.id } }">
          <div>
            <span class="demonstration">{{ item.info }}</span>
          </div>
          <el-image
            style="width: 400px; height: 300px"
            :src="item.img"
          ></el-image>
        </router-link>
      </div>
    </div>

    <div style="margin-top: 2%">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getListInfo } from "@/api/info";
import { EventBus } from "@/utils/event-bus";

export default {
  name: "ViewList",
  data() {
    return {
      listView: [],
      page: 1,
      size: 20,
      total: 1,
      id: "",
    };
  },
  created() {
    this.fetchData(this.page, this.size);
  },

  computed: {},
  mounted() {
    // EventBus.$on("infoItems", (data) => {
    //   this.listView = data;
    //   console.log(data);
    //   this.total = parseInt(data.total);
    //   if (Number.isFinite(this.total)) {
    //     console.log("Number=>", this.total);
    //   }

    //   // this.total = data.total;
    // });
    EventBus.$on("buttonId", (data) => {
      this.id = data;
    });
  },
  methods: {
    fetchData(page, size) {
      // console.log("---this.id--", this.id);
      const o = this.id === "" ? "0" : this.id;
      // console.log("---0--", o);
      const c = {
        type: o,
        page: page,
        size: size,
      };
      getListInfo(c).then((res) => {
        if (0 === res.code) {
          this.listView = res.data;
          //console.log(res);
          this.total = res.data.total;
          //this.total = parseInt(res.data.total);
        } else {
          this.$message({
            showClose: true,
            message: "没有数据",
            type: "warning",
          });
          return;
        }
      });
    },

    handleCurrentChange(val) {
      const o = this.id === "" ? "0" : this.id;

      const c = {
        type: o,
        page: val === undefined ? this.page : val,
        size: this.size,
      };
      console.log("c==>", c);
      // this.page = page;
      // this.fetchData(this.page, this.size);
      getListInfo(c).then((res) => {
        if (res === "") {
          this.$message({
            showClose: true,
            message: "没有数据",
            type: "warning",
          });
          return;
        }
        if (1 === res.code) {
          this.$message({
            showClose: true,
            message: "没有数据",
            type: "warning",
          });
          return;
        }
        //console.log("res==>", res);
        this.listView = res.data;
        //console.log(res);
        this.total = parseInt(res.data.total);
        //console.log("handleCurrentChange=>", this.total);
        // if (Number.isFinite(this.total)) {
        //console.log("Number3=>", this.total);
        // }
      });
    },
    // 页面大小改变时触发
    handleSizeChange(val) {
      this.size = val;
      // 可以在这里进行数据请求，获取新的数据
    },
  },
  watch: {
    id(newValue, oldValue) {
      //console.log("new===>", newValue);
      this.handleCurrentChange();
    },
  },
};
</script>
<style scoped>
/* 
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 5px;
}
.bg-purple-dark {
  background: #f7f7f7;
}
.bg-purple {
  background: #fbfbfc;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 5px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
} */
/* 
#box ul {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 220px;
  margin-top: 10%;
}
#box li {
  padding: 3px;
  list-style: none;
  margin-right: 15px;
  border: 1px solid #eee;
  margin-top: 1%;
  width: 400px;
}
#box img {
  width: 200px;
  height: 150px;
} */

/* .page {
  margin-top: 1600px;
} */

.container {
  display: flex;
  flex-wrap: wrap;
  /* border: 1px solid #ccc; */
}

.image-container {
  width: 24%; /* 每列占总宽度的25% */
  box-sizing: border-box;
  padding: 4px; /* 根据需要调整间距 */
}

.image-container img {
  width: 100%; /* 图片宽度占满容器 */
  height: auto; /* 图片高度自适应 */
  display: block; /* 避免底部空白 */
}
</style>
